<template>
  <div class="bg-white rounded-lg shadow overflow-hidden">
    <el-table
        :data="data"
        v-loading="loading"
        :border="true"
        :stripe="true"
        :highlight-current-row="true"
        @row-click="handleRowClick"
        class="w-full"
    >
      <template v-for="column in columns" :key="column.prop">
        <el-table-column
            v-bind="column"
            :formatter="column.formatter"
        >
          <!-- 使用 v-slot 替代 render 函数 -->
          <template #default="scope" v-if="column.slot">
            <slot :name="column.slot" v-bind="scope"></slot>
          </template>
        </el-table-column>
      </template>
      <!-- 操作列 -->
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <!-- 这里可以使用父组件传入的 actions 插槽 -->
          <slot name="actions" :scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>

    <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-gray-700">
            显示 <span class="font-medium">{{ pagination.currentPage * pagination.pageSize - pagination.pageSize + 1 }}</span>
            到 <span class="font-medium">{{ Math.min(pagination.currentPage * pagination.pageSize, pagination.total) }}</span>
            共 <span class="font-medium">{{ pagination.total }}</span> 条记录
          </p>
        </div>
        <div>
          <el-pagination
              v-model:currentPage="pagination.currentPage"
              v-model:pageSize="pagination.pageSize"
              :total="pagination.total"
              :page-sizes="[10, 20, 50, 100]"
              layout="prev, pager, next, sizes"
              @size-change="$emit('size-change', $event)"
              @current-change="$emit('page-change', $event)"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  columns: {
    type: Array,
    required: true
  },
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  pagination: {
    type: Object,
    default: () => ({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })
  }
})

const emit = defineEmits(['row-click', 'page-change', 'size-change'])

const handleRowClick = (row) => {
  emit('row-click', row)
}
</script>

<style scoped>
.el-table {
  --el-table-border-color: #e5e7eb;
  --el-table-header-bg-color: #f9fafb;
}
</style>